<template>
  <div class="search">
    <div class="top flex">
      <input class="inp" type="text" v-model="conent" @input="search" placeholder="特价清仓">
      <div @click="cancel" class="right">取消</div>
    </div>
    <div v-if="keyword.length==0" class="hot">
      <div class="title">热门搜索</div>
      <div class="list flex">
        <div v-for="(item,index) in key.hotKeywordVOList" :key="index" class="item" :class="index==0&&'active'" >{{item.keyword}}</div>
      </div>
    </div>
    <div v-else class="box">
      <div @click="handler" class="item flex" :data-conent="item" v-for="(item,index) in keyword" :key="index">
        <div class="left">{{item}}</div>
        <div class="right">></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入vue相关
import {ref,onMounted} from 'vue'
//引入api
import { reqSearch,reqKeyword,reqSearchResult } from '@/api/index'


//定义响应式数据
//输入框的值
let conent = ref<any>('')
//默认关键字和热门关键字
let key = ref<any>({})
//实时搜索数据
let keyword = ref<any>([])
//搜索出的数据
let searchArr = ref<any>({})

//定义方法
//获取搜索的数据
const getSearch = async ()=>{
  let result = await reqSearch()
  Object.assign(key.value,result.data)
  // console.log(key.value);
}

//实时搜索
const search = async (e:any)=>{
  console.log(e.detail.value);
  let data = {keywordPrefix:e.detail.value}
  let result = await reqKeyword(data)
  // console.log(result);
  if(result.code==200){
    keyword.value = result.data
    // console.log(keyword.value);
  }
}
//取消的回调
const cancel = ()=>{
  //清除已有数据
  conent.value = ''
  keyword.value = []
}
//商品详情
const handler = async (e:any)=>{
  conent.value = e.currentTarget.dataset.conent
  uni.navigateTo({
    url: `/pages/detail/detail?conent=${conent.value}`
  })
}

//生命周期钩子
onMounted(()=>{
  //获取搜索的数据
  getSearch()
})

</script>

<style scoped lang="less">
.search{
  width: 100%;
  .top{
    padding: 20rpx 0;
    box-sizing: border-box;
    justify-content: space-between;
    .inp{
      width: 80%;
      margin-left: 40rpx;
      padding: 6rpx 14rpx;
      border-radius: 12rpx;
      color: #737373;
      font-size: 28rpx;
      background-color: rgb(225, 225, 225);
    }
    .right{
      width: 20%;
      font-size: 28rpx;
      text-align: center;
      height: 64rpx;
      line-height: 64rpx;
    }
  }
  .hot{
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    .title{
      color: #959595;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }
    .list{
      flex-wrap: wrap;
      .item{
        font-size: 26rpx;
        padding: 8rpx 18rpx;
        border-radius: 10rpx;
        border: 1px solid #ccc;
        margin: 0 18rpx 22rpx 0;
      }
      .active{
        border: 1px solid red;
        color: red;
      }
    }
  }
  .box{
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    .item{
      border-bottom: 1px solid #ccc;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
      // .left{

      // }
      // .right{

      // }
    }
  }
}
</style>